<template>
  <div class="post_box">
    <div class="post_report">
      <!-- 头部 -->
      <div class="post_report_title">
        <h2>发表新攻略</h2>
        <span>分享你的个人游记，让更多人看到哦！</span>
      </div>
      <!-- 头部结束 -->
      <!-- 标题表单 -->
      <div class="post_report_form">
        <el-input placeholder="请输入标题" v-model="form.title"></el-input>
      </div>
      <!-- 标题表单结束 -->
      <!-- 富文本开始 -->
      <div class="post_report_richtext">
        <client-only>
          <vue-editor
            v-model="form.content"
            style="height: 400px"
            :useCustomImageHandler="true"
            @image-added="imgUpload"
            :editor-toolbar="customToolbar"
          ></vue-editor>
        </client-only>
      </div>
      <!-- 富文本结束 -->
      <!-- 选择城市开始 -->
      <div class="post_report_city">
        <label for style="margin-right: 8px">选择城市</label>
        <el-autocomplete
          class="air_form_input"
          placeholder="请搜索游玩城市"
          v-model="form.city"
          :fetch-suggestions="querySearchAsync"
          :trigger-on-focus="false"
        ></el-autocomplete>
      </div>
      <!-- 选择城市结束 -->
      <div class="post_report_issue">
        <!-- @click="postAnnounce"  -->
        <el-button type="primary" size="small" @click="postAnnounce()">发布</el-button>
        <span>或者</span>
        <!--  @click="conserve" -->
        <i @click="postConserve()">保存到草稿</i>
      </div>
    </div>
    <div class="post_drafts">
      <div class="post_drafts_top">
        草稿箱
        <span>( {{$store.state.post.drafts.length}} )</span>
        <div
          v-for="(item,index) in $store.state.post.drafts"
          :key="index"
          class="post_drafst_content"
        >
          <span @click="postEdit(index)">{{ item.title }}</span>
          <br />
          <i>{{item.date}}</i>
          <span class="iconfont el-icon-edit" @click="postEdit(index)"></span>
          <span class="iconfont el-icon-delete" @click="decrease(index)"></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //表单标题
      input10: "",
      //富文本
      inputText: "",
      customToolbar: [
        ["bold", "italic", "underline"],
        [{ list: "ordered" }, { list: "bullet" }],
        ["image", "code-block"],
      ],
      //输入内容 一个人空数组
      content: [],
      //时间
      hours: "",
      //城市
      form: {
        //输入标题
        title: "",
        //输入内容
        content: "",
        // 选择城市
        city: "",
      },
    };
  },

  methods: {
    //输入城市名触发事件
    querySearchAsync(queryString, cb) {
      this.$axios
        .get("/airs/city", {
          params: {
            name: queryString,
          },
        })
        .then((res) => {
          const list = res.data.data.map((v) => ({
            ...v,
            value: v.name.replace("", ""),
          }));
          cb(list);
        });
    },
    //点击保存草稿右边页面渲染用户输入的内容
    postConserve() {
      if (this.$store.state.post.drafts.length == 5) {
        const date = new Date();
        const fullDate = `${date.getFullYear()}-${(
          Array(2).join(0) +
          (date.getMonth() + 1)
        ).slice(-2)}-${(Array(2).join(0) + date.getDate()).slice(-2)}`;
        this.$store.commit("post/read_in", {
          ...this.form,
          date: fullDate,
        });
        this.$store.commit("post/behind");
      } else {
        if (this.form.title == "") {
          this.$message({
            message: "请输入标题",
            type: "error",
          });
          return;
        } else {
          const date = new Date();
          const fullDate = `${date.getFullYear()}-${(
            Array(2).join(0) +
            (date.getMonth() + 1)
          ).slice(-2)}-${(Array(2).join(0) + date.getDate()).slice(-2)}`;
          this.$store.commit("post/read_in", {
            ...this.form,
            date: fullDate,
          });
        }
      }
    },
    //删除草稿
    decrease(index) {
      // this.content.splice(index, 1);
      this.$confirm("是否要删除此草稿", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.commit("post/delete", index);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //点击编辑
    postEdit(index) {
      this.form.title = this.$store.state.post.drafts[index].title;
      this.form.content = this.$store.state.post.drafts[index].content;
      this.form.city = this.$store.state.post.drafts[index].city;
    },
    //点击发布是否有登录 没有就跳转到首页登录成功判断该写内容是否齐全 不齐弹出提示框 齐全就弹出发布成功
    postAnnounce() {
      //判断是否有登入
      const { token } = this.$store.state.user;
      console.log(token);
      if (!token) {
        // token不存在
        this.$alert("请先登录", "提示", {
          confirmButtonText: "确定",
        });
        this.$router.push(`/user/login`);
        return;
      }

      if (this.form.title == "") {
        this.$message({
          message: "请输入标题",
          type: "error",
        });
        return;
      }
      if (this.form.content == "") {
        this.$message({
          message: "请输入内容",
          type: "error",
        });
        return;
      }
      //判断是非有输入内容
      if (this.form.city == "") {
        this.$message({
          message: "请输入城市",
          type: "error",
        });
        return;
      }
      //发送请求
      this.$axios
        .post("/posts", this.form, {
          headers: {
            Authorization: " Bearer " + token,
          },
        })
        .then((res) => {
          console.log(res.data);
          this.$message.success("发布成功!");
          this.form.title = "";
          this.form.content = "";
          this.form.city = "";
        });
    },
    //富文本框图片上传事件
    imgUpload(file, Editor, cursorLocation, resetUploader) {
      //自定义图片上传
      //禁止富文本框图片转换成base64
      const formdata = new FormData();
      console.log(formdata);
      formdata.append("files", file);
      this.$axios({
        method: "post",
        url: "/upload",
        data: formdata,
      })
        .then((res) => {
          console.log(res.data);
          let url = "http://127.0.0.1:1337" + res.data[0].url; // 返回给你的图片路径
          //将这个url放入到富文本编辑器当中
          Editor.insertEmbed(cursorLocation, "image", url);
          resetUploader();
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.post_box {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  .post_report {
    flex: 7.5;
    .post_report_title {
      height: 60px;
      margin-top: 20px;

      h2 {
        font-weight: 400;
        font-size: 22px;
        margin-bottom: 6px;
      }
      span {
        font-size: 12px;
        color: #999;
      }
    }
    .post_report_form {
      margin-top: 6px;
    }
    .post_report_richtext {
      margin-top: 20px;
      height: 400px;
    }
    .post_report_city {
      height: 40px;
      font-size: 14px;
      margin-top: 110px;
    }
    .post_report_issue {
      margin-top: 20px;
      margin-bottom: 20px;
      span {
        font-size: 14px;
        margin-left: 10px;
      }

      i {
        font-size: 14px;
        color: orange;
      }
      i:hover {
        border-bottom: 2px solid orange;
        cursor: pointer;
      }
    }
  }
  .post_drafts {
    flex: 2.5;
    margin-left: 25px;
    .post_drafts_top {
      margin-top: 20px;
      color: #666;
      line-height: 40px;
      padding-left: 10px;
      border: 1px solid #ddd;
      padding-bottom: 10px;
    }
    .post_drafst_content {
      position: relative;
      font-size: 14px;
      color: black;
      margin-bottom: 5px;
      i {
        font-size: 14px;
        color: #999;
        position: absolute;
        top: 20px;
        left: 0;
      }
      span:nth-child(1):hover {
        color: orange;
        border-bottom: 2px solid orange;
      }
      span:hover {
        cursor: pointer;
      }
      span:nth-child(4) {
        position: absolute;
        top: 30px;
        left: 180px;
      }
      span:nth-child(5) {
        position: absolute;
        top: 30px;
        left: 200px;
      }
    }
  }
}
</style>